<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>{{name}}</div>
    <div>{{count}}</div>
    <div>{{object.foo}}</div>
    <el-button type="primary" @click="change">主要按钮</el-button>
  </div>
</template>

<script>
import store from "@/store";
import { ref, reactive ,computed} from 'vue'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  computed:{
    name(){
     return store.state.name
    }
  },
  setup() {
    const count = ref(0)
    const name = ref(store.state.name)
    const object = reactive({ foo: 'bar' })

    // const names = computed({
    //   get: () => name.value + count.value ,
    //   set: (val) => {
    //     console.log(val)
    //     name.value =name.value + val
    //   },
    // })
    const names = computed(() => name.value + count.value )
    function change() {
      store.commit("updateName",names);
    }
    // 暴露给模板
    return {
      names,
      object,
      change
    }
  }
}
</script>

